<template>
  <a-modal
      :title="saleText"
      :visible="saleType"
      @cancel="saleCancel"
      @ok="saleOk"
  >
    <a-form
        :form="form"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 18}"
    >
      <a-form-item label="姓名">
        <a-input
            placeholder="请输入姓名"
            v-decorator="['username', { rules: [{ required: true, message: '请输入姓名!', whitespace: true }],initialValue:this.lists.username}]"
        />
      </a-form-item>
      <a-form-item label="地址">
        <a-input
            placeholder="请输入地址"
            autocomplete="autocomplete"
            v-decorator="['address', { rules: [{ required: true, message: '请输入地址!', whitespace: false }],initialValue:this.lists.address }]"
        />
      </a-form-item>
      <a-form-item label="公司">
        <a-input
            placeholder="请输入公司"
            autocomplete="autocomplete"
            v-decorator="['company', { rules: [{ required: true, message: '请输入公司!', whitespace: true }],initialValue:this.lists.company }]"
        />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input
            type="tel"
            placeholder="请输入手机号"
            autocomplete="autocomplete"
            v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号!', whitespace: true }],initialValue:this.lists.phone }]"
        />
      </a-form-item>
      <a-form-item label="简介">
        <a-textarea
            placeholder="请输入简介"
            autocomplete="autocomplete"
            :rows="4"
            v-decorator="['introduction', { initialValue:this.lists.introduction }]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
//  引入添加编辑api的函数
import { marketAdd, marketEdit } from '@/services/photoList';

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  name: 'SaleAdd',
  inject: ['reload'],
  components: {
  },
  props: {
    saleText: String,   //  标题
    saleType: Boolean,  //  状态
    lists: Object         //  初始化值
  },
  data() {
    return {
      formItemLayout,
      formTailLayout,
      checkNick: false,
      form: this.$form.createForm(this)
    };
  },
  methods: {
    saleOk(submitEvent) {
      if (this.saleText === '编辑账号'){
        console.log(this.lists)
        const id = this.lists.id
        this.form.validateFields((err,value)=>{
          if (!err) {
            marketEdit({id:id,...value}).then(res=>{
              console.log(res)
              this.$message.success(res.data.message)
              this.$emit('saleOk',false)
              this.reload()
            })
            this.saleType = true
          }
        })

      }
      if (this.saleText === '添加账号'){
        console.log(submitEvent)
        this.form.validateFields((err)=>{
          if (!err) {
            let formData = new FormData()
            formData.append('address',this.form.getFieldValue('address'))
            formData.append('company',this.form.getFieldValue('company'))
            formData.append('introduction',this.form.getFieldValue('introduction'))
            formData.append('phone',this.form.getFieldValue('phone'))
            formData.append('username',this.form.getFieldValue('username'))
            marketAdd(formData).then(res=>{
              console.log(res)
              this.$message.success(res.data.message)
              this.$emit('saleOk',false)
              this.reload()
            })
            this.saleType = true
          }
        })
      }
    },
    saleCancel() {
      this.$emit('saleCancel',false)
    },

    handleChange(value) {
      console.log(`selected ${value}`);
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style scoped>

</style>
